<template>
	<view class="content">
		<!-- banner图 -->
        <u-swiper
            class="swiper"
            :list="bannerList"
            keyName="url"
            circular
            indicator
            height="783rpx"
            radius="0"
            indicatorStyle="bottom: 100rpx"
            indicatorMode="dot"
            indicatorActiveColor="#FFFFFF"
            indicatorInactiveColor="#00000066"
        />
        <!-- 三个按钮栏 -->
        <view class="threeFeature">
            <view class="feature" @tap="toTimelyDelivery">
                <u--image class="featureImg" src="/static/img/jss.svg" width="100rpx" height="100rpx" />
                <view class="itemName">及时送</view>
            </view>
            <view class="feature" @tap="toCommerce">
                <u--image class="featureImg" src="/static/img/dsgw.svg" width="100rpx" height="100rpx" />
                <view class="itemName">电商购物</view>
            </view>
            <view class="feature" @tap="toRechargeVoucher">
                <u--image class="featureImg" src="/static/img/czq.svg" width="100rpx" height="100rpx" />
                <view class="itemName">充值券</view>
            </view>
        </view>
        <!-- 群聊 -->
        <view class="chatBox">
            <u--image class="featureImg" src="/static/img/chatGroup.png" width="100%" height="200rpx" mode="aspectFill" />
        </view>
        <!-- 热门商品 -->
        <sectionTitle icon="/static/img/fire.svg" title="热门商品" />
		
        <u-list height="100%" @scrolltolower="scrolltolower" >
            <u-list-item
                v-for="(item, index) in productList.length/2"
                :key="index"
            >
                <view class="listRow">
                    <product-col :item="productList[index * 2]" />
                    <product-col v-if="productList[index * 2 + 1]" :item="productList[index * 2 + 1]" />
                </view>
            </u-list-item>
        </u-list>
        
        <!-- 优惠券领取弹窗 -->
        <claimCoupon :show.sync="showClaimCoupon" />
	</view>
</template>

<script>
    import { claimCoupon } from "@/pages/home/components/claimCoupon.vue"
    import { sectionTitle } from "@/components/sectionTitle.vue"
    import { productCol } from "@/components/product-col.vue"
	export default {
        components: {
            claimCoupon,
            sectionTitle,
            productCol
        },
		data() {
			return {
                showClaimCoupon: false, // 优惠券领取弹窗
				// bannerList: [],
                
                hotProPage: 1,
                // productList: [],
                bannerList: [],
                productList: [{
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    storeName: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                    price: 209.00
                }, {
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    storeName: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                    price: 209.00
                }, {
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    storeName: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                    price: 209.00
                }, {
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    storeName: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                    price: 209.00
                }, {
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    storeName: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                    price: 209.00
                }, {
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    storeName: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                    price: 209.00
                }, {
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    storeName: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                    price: 209.00
                }]

			}
		},
        watch: {
            showClaimCoupon: {
                handler: (n) => {
                    if (n) {
                        uni.hideTabBar()
                    } else {
                        setTimeout(() => {
                            uni.showTabBar()
                        }, 300)
                    }
                }
            }
        },
		onLoad() {
            if (!uni.getStorageSync('token')) {
                this.login()
            }
            // this.showClaimCoupon = true
			this.getBannerlist()
            this.getHotPro()
		},
		methods: {
			getBannerlist(){
				this.$http('/api/getCarousel', 'GET').then(res => {
					if(res){
						this.bannerList = [{
                            createTime: null,
                            id: 64,
                            name: "1",
                            operate: "goldenPic",
                            path: "path",
                            realName: "轮播图1",
                            size: "10",
                            suffix: ".jpg",
                            type: "goldenPic",
                            url: "https://cdn.uviewui.com/uview/swiper/swiper1.png",
                        }, {
                            createTime: null,
                            id: 65,
                            name: "2",
                            operate: "goldenPic",
                            path: "path",
                            realName: "轮播图2",
                            size: "10",
                            suffix: ".jpg",
                            type: "goldenPic",
                            url: "https://cdn.uviewui.com/uview/swiper/swiper2.png",
                        }, {
                            createTime: null,
                            id: 66,
                            name: "3",
                            operate: "goldenPic",
                            path: "path",
                            realName: "轮播图3",
                            size: "10",
                            suffix: ".jpg",
                            type: "goldenPic",
                            url: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
                        }]
					}
				})
			},
            // 及时送
            toTimelyDelivery() {
                uni.navigateTo({
                    url: '/pages/timelyDelivery/timelyDelivery'
                })
            },
            // 电商页面
            toCommerce() {
                uni.showToast({
                    title: '正在开发尽情期待!',
                    icon: 'none'
                })
            },
            // 去充值券
            toRechargeVoucher() {
                uni.navigateTo({
                    url: '/pages/rechargeVoucher/rechargeVoucher'
                })
            },
            getHotPro() {
                this.$http('/api/groom/list/1', 'GET').then(res => {
                    console.log(res)
                    this.productList = res.data.list
                })
            },
            scrolltolower() {
                this.loadmore()
            },
            loadmore() {
                console.log(1111)
            }
		}
	}
</script>

<style lang="scss" scoped>
    .content {
        background-color: $uni-bg-color-grey;
        ::v-deep .u-swiper-indicator {
            .u-swiper-indicator__wrapper {
                .u-swiper-indicator__wrapper__dot {
                    width: 16rpx;
                    height: 16rpx;
                }
                .u-swiper-indicator__wrapper__dot--active {
                    width: 38rpx;
                }
            }
        }
        
        .threeFeature {
            margin: 0 30rpx;
            padding: 30rpx 65rpx;
            background-color: $uni-bg-color;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: $uni-box-shadow-1;
            border-radius: 8rpx;
            position: relative;
            top: -70rpx;
            .feature {
                display: flex;
                flex-direction: column;
                align-items: center;
                .featureImg {
                    
                }
                .itemName {
                    margin-top: 8rpx;
                    font-family: Douyin Sans, Douyin Sans;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: $uni-text-color;
                }
            }
        }
        
        .chatBox {
            margin: 0 30rpx;
            position: relative;
            top: -30rpx;
        }
        
        .listRow {
            margin: 0 30rpx 30rpx;
            display: flex;
            justify-content: space-between;
        }
    }
</style>
